// 用户管理页面的JavaScript功能

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 初始化用户管理功能
    initUserManagement();
    
    // 初始化筛选功能
    initFilters();
    
    // 初始化表格交互
    initTableInteraction();
    
    // 初始化活跃度图表
    initActivityChart();
    
    // 添加动画效果
    addAnimationEffects();
});

// 初始化用户管理功能
function initUserManagement() {
    console.log('用户管理功能初始化完成');
    
    // 设置页面标题
    document.title = '用户管理 - 图书馆管理系统';
}

// 初始化筛选功能
function initFilters() {
    // 获取所有筛选下拉框和日期选择器
    const filters = document.querySelectorAll('.filter-container select, .filter-container input[type="date"]');
    
    // 为每个筛选控件添加事件监听器
    filters.forEach(filter => {
        filter.addEventListener('change', function() {
            console.log('筛选条件变更:', this.name, this.value);
            // 模拟筛选操作
            simulateFiltering();
        });
    });
    
    // 模拟筛选操作
    function simulateFiltering() {
        // 显示加载动画
        showLoading();
        
        // 模拟网络请求延迟
        setTimeout(() => {
            hideLoading();
            // 这里应该是实际的表格数据更新逻辑
            showToast('筛选条件已应用');
        }, 500);
    }
}

// 初始化表格交互
function initTableInteraction() {
    // 获取表格元素
    const table = document.getElementById('userTable');
    const tbody = table.querySelector('tbody');
    const checkboxes = table.querySelectorAll('input[type="checkbox"]');
    
    // 全选/取消全选功能
    const headerCheckbox = table.querySelector('thead input[type="checkbox"]');
    headerCheckbox.addEventListener('change', function() {
        checkboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
    });
    
    // 操作按钮事件处理
    const actionButtons = table.querySelectorAll('.action-btn');
    actionButtons.forEach(button => {
        button.addEventListener('click', function() {
            const row = this.closest('tr');
            const userId = row.cells[1].textContent;
            
            if (this.classList.contains('view')) {
                viewUserDetails(userId);
            } else if (this.classList.contains('edit')) {
                editUser(userId);
            } else if (this.classList.contains('freeze')) {
                freezeUser(userId);
            } else if (this.classList.contains('unfreeze')) {
                unfreezeUser(userId);
            } else if (this.classList.contains('approve')) {
                approveUser(userId);
            } else if (this.classList.contains('reject')) {
                rejectUser(userId);
            } else if (this.classList.contains('delete')) {
                deleteUser(userId);
            }
        });
    });
    
    // 分页功能
    const paginationLinks = document.querySelectorAll('.pagination a');
    paginationLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            // 移除当前活动状态
            document.querySelectorAll('.pagination a.active').forEach(active => {
                active.classList.remove('active');
            });
            
            // 设置新的活动状态
            this.classList.add('active');
            
            // 模拟加载新页面数据
            showLoading();
            setTimeout(() => {
                hideLoading();
                showToast(`已切换到第${this.textContent}页`);
            }, 500);
        });
    });
}

// 查看用户详情
function viewUserDetails(userId) {
    console.log('查看用户详情:', userId);
    // 模拟查看用户详情
    showToast(`查看用户 ${userId} 的详情`);
    // 实际项目中这里应该打开详情模态框
}

// 编辑用户
function editUser(userId) {
    console.log('编辑用户:', userId);
    // 模拟编辑用户
    showToast(`编辑用户 ${userId}`);
    // 实际项目中这里应该打开编辑模态框
}

// 冻结用户
function freezeUser(userId) {
    console.log('冻结用户:', userId);
    // 模拟冻结确认
    if (confirm(`确定要冻结用户 ${userId} 吗？`)) {
        showLoading();
        setTimeout(() => {
            hideLoading();
            showToast(`用户 ${userId} 已冻结`);
            // 实际项目中这里应该更新DOM中的用户状态
            updateUserStatus(userId, 'frozen');
        }, 500);
    }
}

// 解冻用户
function unfreezeUser(userId) {
    console.log('解冻用户:', userId);
    // 模拟解冻操作
    showLoading();
    setTimeout(() => {
        hideLoading();
        showToast(`用户 ${userId} 已解冻`);
        // 实际项目中这里应该更新DOM中的用户状态
        updateUserStatus(userId, 'active');
    }, 500);
}

// 审核通过用户
function approveUser(userId) {
    console.log('审核通过用户:', userId);
    // 模拟审核操作
    showLoading();
    setTimeout(() => {
        hideLoading();
        showToast(`用户 ${userId} 已审核通过`);
        // 实际项目中这里应该更新DOM中的用户状态
        updateUserStatus(userId, 'active');
    }, 500);
}

// 拒绝用户
function rejectUser(userId) {
    console.log('拒绝用户:', userId);
    // 模拟拒绝确认
    if (confirm(`确定要拒绝用户 ${userId} 的注册请求吗？`)) {
        showLoading();
        setTimeout(() => {
            hideLoading();
            showToast(`用户 ${userId} 注册请求已拒绝`);
            // 实际项目中这里应该更新DOM中的用户状态
            updateUserStatus(userId, 'rejected');
        }, 500);
    }
}

// 删除用户
function deleteUser(userId) {
    console.log('删除用户:', userId);
    // 模拟删除确认
    if (confirm(`确定要删除用户 ${userId} 吗？此操作不可恢复。`)) {
        showLoading();
        setTimeout(() => {
            hideLoading();
            showToast(`用户 ${userId} 已删除`);
            // 实际项目中这里应该从DOM中移除对应的行
        }, 500);
    }
}

// 更新用户状态
function updateUserStatus(userId, status) {
    const tableRows = document.querySelectorAll('tbody tr');
    let statusText, statusClass;
    
    // 根据状态设置对应的文本和样式类
    switch(status) {
        case 'active':
            statusText = '正常';
            statusClass = 'active';
            break;
        case 'frozen':
            statusText = '冻结';
            statusClass = 'warning';
            break;
        case 'banned':
        case 'rejected':
            statusText = '禁用';
            statusClass = 'expired';
            break;
        case 'pending':
            statusText = '待审核';
            statusClass = 'pending';
            break;
    }
    
    // 查找并更新对应的行
    tableRows.forEach(row => {
        if (row.cells[1].textContent === userId) {
            const statusCell = row.querySelector('.status');
            statusCell.textContent = statusText;
            statusCell.className = `status ${statusClass}`;
            
            // 根据状态更新操作按钮
            updateActionButtons(row, status);
        }
    });
}

// 更新操作按钮
function updateActionButtons(row, status) {
    const actionCell = row.cells[8];
    let buttonsHTML = '';
    
    // 根据不同状态显示不同的操作按钮
    switch(status) {
        case 'active':
            buttonsHTML = `
                <button class="action-btn view">
                    <i class="fas fa-eye"></i>
                </button>
                <button class="action-btn edit">
                    <i class="fas fa-edit"></i>
                </button>
                <button class="action-btn freeze">
                    <i class="fas fa-snowflake"></i>
                </button>
            `;
            break;
        case 'frozen':
            buttonsHTML = `
                <button class="action-btn view">
                    <i class="fas fa-eye"></i>
                </button>
                <button class="action-btn edit">
                    <i class="fas fa-edit"></i>
                </button>
                <button class="action-btn unfreeze">
                    <i class="fas fa-temperature-high"></i>
                </button>
            `;
            break;
        case 'banned':
        case 'rejected':
            buttonsHTML = `
                <button class="action-btn view">
                    <i class="fas fa-eye"></i>
                </button>
                <button class="action-btn delete">
                    <i class="fas fa-trash"></i>
                </button>
            `;
            break;
        case 'pending':
            buttonsHTML = `
                <button class="action-btn view">
                    <i class="fas fa-eye"></i>
                </button>
                <button class="action-btn approve">
                    <i class="fas fa-check"></i>
                </button>
                <button class="action-btn reject">
                    <i class="fas fa-times"></i>
                </button>
            `;
            break;
    }
    
    // 更新操作按钮HTML
    actionCell.innerHTML = buttonsHTML;
    
    // 重新绑定事件监听器
    const newButtons = actionCell.querySelectorAll('.action-btn');
    newButtons.forEach(button => {
        button.addEventListener('click', function() {
            const userId = row.cells[1].textContent;
            
            if (this.classList.contains('view')) {
                viewUserDetails(userId);
            } else if (this.classList.contains('edit')) {
                editUser(userId);
            } else if (this.classList.contains('freeze')) {
                freezeUser(userId);
            } else if (this.classList.contains('unfreeze')) {
                unfreezeUser(userId);
            } else if (this.classList.contains('approve')) {
                approveUser(userId);
            } else if (this.classList.contains('reject')) {
                rejectUser(userId);
            } else if (this.classList.contains('delete')) {
                deleteUser(userId);
            }
        });
    });
}

// 初始化活跃度图表
function initActivityChart() {
    const chartPeriodSelect = document.querySelector('.chart-controls select');
    
    chartPeriodSelect.addEventListener('change', function() {
        const period = this.value;
        console.log('切换图表周期:', period);
        
        // 显示加载动画
        showLoading();
        
        // 模拟加载图表数据
        setTimeout(() => {
            hideLoading();
            updateActivityChart(period);
            showToast(`已加载${getPeriodLabel(period)}用户活跃度数据`);
        }, 800);
    });
    
    // 初始化显示本月活跃度图表
    updateActivityChart('month');
}

// 获取周期标签
function getPeriodLabel(period) {
    switch(period) {
        case 'week': return '本周';
        case 'month': return '本月';
        case 'quarter': return '本季度';
        case 'year': return '本年';
        default: return '';
    }
}

// 更新活跃度图表
function updateActivityChart(period) {
    const chartPlaceholder = document.querySelector('.chart-placeholder');
    
    // 模拟不同周期的活跃度数据
    const periodData = {
        'week': {
            labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            data: [230, 280, 340, 290, 350, 380, 310]
        },
        'month': {
            labels: ['1日', '5日', '10日', '15日', '20日', '25日', '30日'],
            data: [320, 340, 360, 380, 420, 410, 390]
        },
        'quarter': {
            labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'],
            data: [1200, 1350, 1420, 1500, 1650, 1800, 2100, 2300, 2450]
        },
        'year': {
            labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            data: [1200, 1350, 1420, 1500, 1650, 1800, 2100, 2300, 2450, 2600, 2800, 3000]
        }
    };
    
    const data = periodData[period];
    
    // 简单显示图表内容
    chartPlaceholder.innerHTML = `
        <div class="activity-chart">
            <div class="chart-labels">
                ${data.labels.map(label => `<div class="chart-label">${label}</div>`).join('')}
            </div>
            <div class="chart-bars">
                ${data.data.map(value => `
                    <div class="chart-bar-container">
                        <div class="chart-bar" style="height: ${(value / Math.max(...data.data)) * 100}%">
                            <div class="chart-value">${value}</div>
                        </div>
                    </div>
                `).join('')}
            </div>
        </div>
    `;
}

// 添加动画效果
function addAnimationEffects() {
    // 为统计卡片添加进入动画
    const statCards = document.querySelectorAll('.stat-card');
    statCards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        
        setTimeout(() => {
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
        }, 100 + 100 * index);
    });
    
    // 为表格行添加进入动画
    const tableRows = document.querySelectorAll('tbody tr');
    tableRows.forEach((row, index) => {
        row.style.opacity = '0';
        row.style.transform = 'translateY(20px)';
        row.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
        
        setTimeout(() => {
            row.style.opacity = '1';
            row.style.transform = 'translateY(0)';
        }, 200 + 100 * index);
    });
    
    // 为卡片添加进入动画
    const cards = document.querySelectorAll('.card');
    cards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        
        setTimeout(() => {
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
        }, 300 + 150 * index);
    });
}

// 显示加载动画
function showLoading() {
    // 检查是否已经存在加载元素
    let loadingOverlay = document.querySelector('.loading-overlay');
    
    if (!loadingOverlay) {
        loadingOverlay = document.createElement('div');
        loadingOverlay.className = 'loading-overlay';
        loadingOverlay.innerHTML = `
            <div class="loading-spinner">
                <div class="spinner"></div>
                <p>加载中...</p>
            </div>
        `;
        document.body.appendChild(loadingOverlay);
    }
    
    loadingOverlay.style.display = 'flex';
}

// 隐藏加载动画
function hideLoading() {
    const loadingOverlay = document.querySelector('.loading-overlay');
    if (loadingOverlay) {
        loadingOverlay.style.display = 'none';
    }
}

// 显示提示消息
function showToast(message) {
    // 检查是否已经存在toast元素
    let toast = document.querySelector('.toast');
    
    if (!toast) {
        toast = document.createElement('div');
        toast.className = 'toast';
        document.body.appendChild(toast);
    }
    
    // 设置消息内容
    toast.textContent = message;
    
    // 显示toast
    toast.classList.add('show');
    
    // 3秒后自动隐藏
    setTimeout(() => {
        toast.classList.remove('show');
    }, 3000);
}

// 导出用户数据
function exportUserData() {
    console.log('导出用户数据');
    showLoading();
    
    // 模拟导出过程
    setTimeout(() => {
        hideLoading();
        showToast('用户数据导出成功');
    }, 1500);
}

// 批量导入用户
function importUsers() {
    console.log('批量导入用户');
    showToast('批量导入功能待实现');
    // 实际项目中这里应该打开文件选择对话框
}

// 新增用户
function addNewUser() {
    console.log('新增用户');
    showToast('新增用户对话框待实现');
    // 实际项目中这里应该打开新增用户模态框
}

// 批量冻结用户
function batchFreezeUsers() {
    const selectedCheckboxes = document.querySelectorAll('tbody input[type="checkbox"]:checked');
    
    if (selectedCheckboxes.length === 0) {
        showToast('请选择要冻结的用户');
        return;
    }
    
    if (confirm(`确定要冻结选中的 ${selectedCheckboxes.length} 个用户吗？`)) {
        showLoading();
        
        // 模拟冻结过程
        setTimeout(() => {
            hideLoading();
            showToast(`已冻结 ${selectedCheckboxes.length} 个用户`);
            // 实际项目中这里应该更新DOM中的用户状态
        }, 1000);
    }
}

// 批量解冻用户
function batchUnfreezeUsers() {
    const selectedCheckboxes = document.querySelectorAll('tbody input[type="checkbox"]:checked');
    
    if (selectedCheckboxes.length === 0) {
        showToast('请选择要解冻的用户');
        return;
    }
    
    showLoading();
    
    // 模拟解冻过程
    setTimeout(() => {
        hideLoading();
        showToast(`已解冻 ${selectedCheckboxes.length} 个用户`);
        // 实际项目中这里应该更新DOM中的用户状态
    }, 1000);
}

// 刷新用户数据
function refreshUserData() {
    console.log('刷新用户数据');
    showLoading();
    
    // 模拟刷新过程
    setTimeout(() => {
        hideLoading();
        showToast('用户数据已刷新');
    }, 1000);
}

// 注册顶部操作按钮事件
const actionButtons = document.querySelectorAll('.action-buttons button');
actionButtons.forEach(button => {
    button.addEventListener('click', function() {
        if (this.querySelector('.fa-user-plus')) {
            addNewUser();
        } else if (this.querySelector('.fa-upload')) {
            importUsers();
        } else if (this.querySelector('.fa-download')) {
            exportUserData();
        } else if (this.querySelector('.fa-refresh')) {
            refreshUserData();
        }
    });
});

// 键盘快捷键支持
document.addEventListener('keydown', function(e) {
    // Ctrl+R 刷新数据
    if (e.ctrlKey && e.key === 'r') {
        e.preventDefault();
        refreshUserData();
    }
    
    // Ctrl+E 导出数据
    if (e.ctrlKey && e.key === 'e') {
        e.preventDefault();
        exportUserData();
    }
});

// 响应式布局调整
window.addEventListener('resize', function() {
    adjustTableLayout();
});

function adjustTableLayout() {
    const tableContainer = document.querySelector('.table-container');
    const table = document.getElementById('userTable');
    
    if (window.innerWidth < 768) {
        tableContainer.classList.add('scrollable');
    } else {
        tableContainer.classList.remove('scrollable');
    }
}

// 初始化表格布局
adjustTableLayout();

// 模拟实时数据更新
function simulateRealTimeUpdates() {
    setInterval(() => {
        const randomRow = Math.floor(Math.random() * document.querySelectorAll('tbody tr').length);
        const row = document.querySelectorAll('tbody tr')[randomRow];
        const statusCell = row.querySelector('.status');
        
        // 只对"待审核"的用户进行随机审核
        if (statusCell.classList.contains('pending') && Math.random() > 0.7) {
            const userId = row.cells[1].textContent;
            updateUserStatus(userId, 'active');
            showToast(`用户 ${userId} 已自动审核通过`);
        }
    }, 20000); // 每20秒模拟一次状态变化
}

// 启动实时数据更新模拟
simulateRealTimeUpdates();

// 提供导出CSV格式的函数
function exportToCSV() {
    // 模拟生成CSV数据
    let csvContent = '用户ID,用户名,类型,邮箱,手机号,注册日期,状态\n';
    
    const tableRows = document.querySelectorAll('tbody tr');
    tableRows.forEach(row => {
        const cells = row.querySelectorAll('td');
        const rowData = [];
        
        // 收集表格数据（跳过复选框和操作列）
        for (let i = 1; i < cells.length - 1; i++) {
            let cellText = cells[i].textContent.trim();
            
            // 如果是用户名列，提取实际用户名（不包括头像部分）
            if (i === 2) {
                cellText = cells[i].querySelector('span').textContent.trim();
            }
            // 如果是状态列，提取文本内容
            else if (cells[i].querySelector('.status')) {
                cellText = cells[i].querySelector('.status').textContent.trim();
            }
            
            rowData.push(`"${cellText}"`);
        }
        
        csvContent += rowData.join(',') + '\n';
    });
    
    // 创建下载链接
    const encodedUri = encodeURI("data:text/csv;charset=utf-8," + csvContent);
    const link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", `用户数据_${new Date().toISOString().slice(0, 10)}.csv`);
    document.body.appendChild(link);
    
    // 触发下载
    link.click();
    
    // 清理
    document.body.removeChild(link);
}

// 搜索功能
function initSearch() {
    const searchBox = document.querySelector('.search-box input');
    
    searchBox.addEventListener('input', function() {
        const searchTerm = this.value.toLowerCase();
        const tableRows = document.querySelectorAll('tbody tr');
        
        tableRows.forEach(row => {
            const userId = row.cells[1].textContent.toLowerCase();
            const userName = row.cells[2].querySelector('span').textContent.toLowerCase();
            const email = row.cells[4].textContent.toLowerCase();
            
            if (userId.includes(searchTerm) || userName.includes(searchTerm) || email.includes(searchTerm)) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    });
}

// 初始化搜索功能
initSearch();

// 提供API: 可以被其他脚本调用的公共方法
export const UserManagement = {
    refreshData: refreshUserData,
    exportData: exportToCSV,
    batchFreeze: batchFreezeUsers,
    batchUnfreeze: batchUnfreezeUsers,
    getSelectedUsers: function() {
        const selectedCheckboxes = document.querySelectorAll('tbody input[type="checkbox"]:checked');
        const selectedUsers = [];
        
        selectedCheckboxes.forEach(checkbox => {
            const row = checkbox.closest('tr');
            selectedUsers.push(row.cells[1].textContent);
        });
        
        return selectedUsers;
    }
};